<template>
  <view class="app-container">
    <uni-notice-bar :speed="70" single="true" scrollable="true" :text="hintText"></uni-notice-bar>
    <view class="container">
      <view class="title-view">{{ title }}</view>
      <view class="hor-layout-center-all">
        <span class="info-text">{{ author }}</span>
        <span class="info-text">{{ niceShareDate }}</span>
      </view>
      <view v-if="loadError" class="list-no-data">加载失败...</view>
      <block v-for="(item,index) in contents" :key="index">
        <!-- 如果有code就展示code -->
        <view v-if="item.code" class="code-view">
          {{ item.code }}
        </view>
        <!-- 如果有text就展示text -->
        <view v-if="item.text" class="text-view">
          {{ item.text }}
        </view>
        <!-- 如果有image就展示image -->
        <image v-if="item.image" mode="widthFix" class="image-view" :src="item.image"></image>
      </block>
    </view>
    <view class="copy-button" @click="copyText(url)">复制链接</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contents: [],
      title: '',
      url: '',
      author: '',
      niceShareDate: '',
      loadError: false,
      hintText: '由于小程序的限制,本页面并非直接展示的公众号网页。而是爬取到网页内容后用控件展示出来的，所以样式可能不美观。'
    }
  },
  onLoad(options) {
    this.url = options.url
    this.title = options.title
    this.author = options.author
    this.niceShareDate = options.niceShareDate
    console.log(this.url, this.title)
    this.getHtmlData()
    uni.setNavigationBarTitle({
      title: this.title
    })
  },
  methods: {
    getHtmlData() {
      uni.showLoading({
        title: "加载中..."
      })
      uniCloud.callFunction({
        name: "api-request",
        data: {
          action: "getWeiXinHtml",
          url: this.url
        },
        success: (res) => {
          uni.hideLoading()
          this.contents = res.result.content
        },
        fail: (err) => {
          uni.hideLoading()
          this.loadError = true
        }
      })
    },
    // 复制文字监听
    copyText(text) {
      console.log("copyText", text)
      uni.setClipboardData({
        data: text,
        success: function (res) {
          uni.getClipboardData({
            success: function (res) {
              uni.showToast({
                title: '复制成功',
                icon: 'none'
              })
            }
          })
        }
      })
    },
  }
}
</script>

<style scoped>
view {
  font-size: 14px;
  font-weight: 400;
  font-family: PingFangSC-Regular;
  word-break: break-word;
}

text {
  display: flex;
  font-family: PingFangSC-Regular;
  font-weight: 500;
}

.container {
  padding: 15px;
  padding-top: 0px;
}

.title-view {
  font-size: large;
  text-align: center;
}

.line-view {
  height: 20px;
}

.image-view {
  width: 100%;
}

.code-view {
  margin-top: 10px;
  word-break: break-all;
  overflow-y: auto;
  color: rgb(169, 183, 198);
  background: rgb(40, 43, 46);
  padding: 0.5em;
  white-space: pre-line;
  line-height: 15px;
  font-size: 11px;
  word-spacing: -3px;
  letter-spacing: 0px;
  font-family: Consolas, Inconsolata, Courier, monospace;
  border-radius: 6px;
  color: rgb(169, 183, 198);
  background: rgb(40, 43, 46);
  padding: 0.5em;
  /*overflow-wrap: normal !important;*/
  /*word-break: normal !important;*/
  /*overflow: auto !important;*/
  /*display: -webkit-box !important;*/
}

.copy-button {
  position: fixed;
  right: 20px;
  bottom: 50px;
  color: white;
  font-size: small;
  padding: 4px 12px;
  border-radius: 5px;
  background: #91c2e8;
}

.text-view {
  text-indent: 30px;
  letter-spacing: 1.4px;
  font-size: 14px;
  margin-top: 10px;
  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

.info-text {
  margin-left: 10px;
}
</style>
